<template>
	<hyb-page title="档案列表">
		<template v-slot:top>
			<view
				class="gui-bg-white gui-dark-bg-level-1 gui-padding gui-flex gui-space-between gui-align-items-center">
				<gui-search class="gui-flex1" @inputting="inputting" @clear="search=''"></gui-search>
				<view style="padding: 0 20rpx;border-radius: 30rpx;margin-left: 20rpx;"
					class="gui-bg-red gui-color-white gui-text-small" @tap="query(1)"><text
						class="gui-form-icon gui-icons">&#xe604; </text>查询</view>
			</view>

		</template>
		<template v-slot:body>
			<view style="height: 120rpx;"></view>

			<hyb-empty v-if="list.length == 0"></hyb-empty>

			<view class="gui-padding-small">
				<view
					class="gui-list-items gui-bg-white gui-padding-small gui-border-radius-large gui-margin-top-middle"
					v-for="(item,index) in list" :key="index" @click="choose(item.h_id)">
					<gui-image style="border-radius: 10rpx;" height="140" width="140" mode="aspectFit"
						:src="item.userinfo.u_thumb||$store.state.base.erweima">
					</gui-image>
					<view class="gui-list-body gui-flex1 gui-margin-left">
						<view class="gui-list-title">
							<view class="gui-text gui-primary-text gui-flex1 gui-space-between">
								<text class="gui-text">{{item.name}}</text>
								<text class="gui-color-red gui-text  gui-margin-left">{{item.age}}岁</text>
							</view>
						</view>
						<view class="gui-list-body-desc gui-margin-top">
							<view class="gui-flex gui-row gui-nowrap gui-align-items-center  gui-flex1">
								<view class="gui-text-small">设备参数：</view>
								<text class="gui-text-small gui-color-gray">{{item.device}}</text>
							</view>

							<view
								class="gui-flex gui-row gui-nowrap gui-align-items-center  gui-flex1 gui-margin-top-middle"
								v-if="item.u_jinengs">
								<view>技能：</view>
								<gui-tags :size="20" v-for="(jineng,index) in item.u_jinengs.splice(0,2)"
									:text="jineng.xt_name"
									:customClass="['gui-bg-red','gui-color-white','gui-ellipsis']"></gui-tags>
							</view>

							<view
								class="gui-flex gui-row gui-nowrap gui-align-items-center  gui-flex1 gui-margin-top-middle"
								v-if="item.u_jinengs">
								<view>服务人数：{{item.fw_count}}</view>
								<view></view>
							</view>
						</view>
					</view>
					<text class="gui-icons gui-color-gray gui-margin-left">&#xe601;</text>
				</view>
			</view>
		</template>

	</hyb-page>
</template>

<script>
	export default {
		data() {
			return {
				tag: 1,
				list: [],
				page: 1,
				last_page: 1,
				search: ""
			}
		},

		computed: {
			base: () => {
				return uni.storage.get("base")
			}
		},

		onReachBottom() {

			if (this.last_page > this.page) {
				this.page++;
				this.query()
			}

		},

		onLoad(options) {
			if (options.tag) {
				this.tag = options.tag;
			}


			this.query();
		},


		methods: {
			inputting(search) {
				this.search = search;
			},

			query(page) {
				if (page) this.page = page;
				if (this.page == 1) {
					this.list = [];
				}
				uni.gPost("health/list", {
					page: this.page,
					search: this.search
				}).then((res) => {
					this.last_page = res.last_page;
					this.list = this.list.concat(res.data);
				})
			},
			choose(id) {
				uni.showActionSheet({
					itemList: ["测量记录", "查看档案"],
					success: (res) => {

						let url = "/health/profile/profile"
						if (res.tapIndex == 0) {
							url = "/health/record/record"
						}

						uni.navigateTo({
							url: url + "?id=" + id
						})
					}
				})
			},
			to(id) {
				uni.navigateTo({
					url: "/health/profile/profile?id=" + id
				})
			}
		}
	}
</script>

<style>
	/* 自定义吸顶元素样式 */
	.js-icon {
		border-radius: 50%;
	}

	.js-status {
		border: 1rpx solid red;
		color: red;

	}
</style>